<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM + Date作业</title>
    <style>
        h1 {
            width: 500px;
            margin: 50px auto;
        }

        table {
            /* border: 1px solid red; */
            margin: 0 auto;

        }

        table tr td {
            width: 45px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>距离劳动节还有：</h1>
    <table>
            <tr>
                <td>1-1</td>
                <td>2-1</td>
                <td>3-1</td>
                <td>4-1</td>
            </tr>
            <tr>
                <td>1-2</td>
                <td>2-2</td>
                <td>3-2</td>
                <td>4-2</td>
            </tr>
            <tr>
                <td>1-3</td>
                <td>2-3</td>
                <td>3-3</td>
                <td>4-3</td>
            </tr>
            <tr>
                <td>1-4</td>
                <td>2-4</td>
                <td>3-4</td>
                <td>4-4</td>
            </tr>
    </table>
    <script>
        // var tab = document.querySelector("table");
        // console.log(tab);
        // var tr = tab.rows;
        var trs = document.querySelectorAll("tr");
        for(var i = 0; i < trs.length; i++) {
            var tds = trs[i].cells;
            tds[i].style.backgroundColor = "red";
            tds[i].style.color = "white";
        }


        // 五一倒计时，最低要求打印在控制台
        function diffTime(curr, tar) {
            var diffMs = Math.ceil((tar.getTime() - curr.getTime()) / 1000);
            var day = Math.floor(diffMs / (24 * 60 * 60));
            var hours = Math.floor((diffMs % (24 * 60 * 60)) / (60 * 60));
            var minutes = Math.floor((diffMs % (60 * 60)) / 60);
            var seconds = diffMs % 60;
            return { day, hours, minutes, seconds };
        }
        var h1 = document.querySelector("h1");
        var targetDate = new Date("2023-5-1 00:00:00");
        setInterval(function () {
            var currentDate = new Date();
            var res = diffTime(currentDate, targetDate);
            h1.innerHTML = `距离劳动节还有：<br> ${res.day}天 ${res.hours}小时 ${res.minutes}分钟 ${res.seconds}秒`;
        }, 0);
        // console.log(h1);
    </script>
</body>

</html>